<template>
	<view class="container">
		<view class="pageHead">
			<image src="../../static/arc.png" class="bgPic" mode=""></image>
			<view class="headPicCon">
				<image class="portrait" :src="userDetail?userDetail.userPhoto:'/static/missing-face.png'"></image>
			</view>
			<view class="userInfoBox">
				<text>让利值：{{userDetail.pv_credit}}</text>
				<!-- <text>今日收益：</text> -->
			</view>
		</view>
		
		<view class="incomeList">
			<block v-if="incomes && incomes.length">
				<view :class="['incomeItem',index!=incomes.length-1?'borderbot':'']" v-for="(item, index) in incomes" :key="index">
					<view class="from">
						<view class="headPicCon">
							<image style="width: 50px;height: 50px;" class="portrait" :src="userDetail?userDetail.userPhoto:'/static/missing-face.png'"></image>
						</view>
					</view>
					<view class="timer">
						{{item.createTime}}
					</view>
					<view class="incomeAccount">
						<text>{{item.remark}}</text>
						<image src="../static/images/Moneybag.png" class="moneyPic" mode=""></image>
						<text>{{item.score}}</text>
					</view>
				</view>
			</block>
			<empty v-else emptyText="当前暂无收益"></empty>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue"
	export default {
		components:{empty},
		data() {
			return {
				userDetail: uni.getStorageSync('userDetail'),
				incomes: [],
				currentPage:1,
				total:1
			};
		},
		onLoad() {
			this.loadIncomes()
		},
		// onReachBottom(){
		// 	this.currentPage++
		// 	this.loadIncomes()
		// },
		methods: {
			loadIncomes() {
				let that = this
				// if(that.currentPage>that.total){
				// 	that.$api.msg('没有更多了！')
				// 	return
				// }
				//api/Usercentinfo/getBenefitInfo
				that.$Request.request('/api/user_center/pvLogs', 'POST',{}).then(res => {
					if (res.status == 1) {
							console.log(res)
						that.incomes=res.data.pvLogs
						that.total=parseInt(res.pageNum)
					}
				
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	.container {
		height: 100%;
		background-color: #F8F8F8;
	}

	.borderbot {
		border-bottom: 1rpx solid $uni-border-color;
	}

	.incomeList {
		width: 710rpx;
		margin: 20rpx auto;
		background-color: #fff;
		box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.4);
		border-radius: 10rpx;
		padding: 20rpx 0 20rpx 26rpx;

		.incomeItem {

			padding: 26rpx 0;
			@extend %flexBetw;
			font-size: $uni-font-size-sm;

			.from {
				padding-left: 0.2em;
				font-size: $uni-font-size-sm;

				text {
					font-weight: bold;
					color: $themColor;
				}
			}

			.incomeAccount {
				@extend %flexVcenter;
				padding-right: 20rpx;

				.moneyPic {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.timer {
			}
		}
	}

	.pageHead {
		width: 750rpx;
		height: 330rpx;
		background: linear-gradient(to bottom, #ee5b25, #d92b25);
		position: relative;

		.headPicCon {
			height: 180rpx;
			width: 750rpx;
			@extend %flexAlCenter;

			.portrait {
				width: 130rpx;
				height: 130rpx;
				border: 5rpx solid #fff;
				border-radius: 50%;
			}
		}

		.userInfoBox {
			color: #fff;
			font-size: $uni-font-size-base;
			padding: 0 50rpx;
			@extend %flexAlCenter;
		}

		.bgPic {
			width: 750rpx;
			height: 60rpx;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
</style>
